<!DOCTYPE html>
<html lang="en" layout:decorator="layout/main" xmlns:layout="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,initial-scale=1"/>

    <link rel="stylesheet" th:href="@{/thirdParty/datatables/dataTables.bootstrap.css}" />
    <link rel="stylesheet" th:href="@{/thirdParty/iCheck/all.css}" />

    <title>用户列表</title>
</head>
<body>
        <section class="content" layout:fragment="content">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">用户列表</h3>
                    </div>
                    <div class="col-xs-12">
                        <button type="button" class="btn bg-purple margin pull-right" data-toggle="modal" data-target="#myModal" onclick="toAdd();"><i class="fa fa-credit-card"></i> 添加用户
                        </button>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="datasOnTable" class="table table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>名称</th>
                                <th>邮箱</th>
                                <th>角色</th>
                                <th>状态</th>
                                <th>注册时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>


            <!--dialog-->
            <div class="modal inmodal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content animated bounceInRight">
                        <form role="form" class="form-horizontal" id="updateFrom" th:action="@{/admin/user/updateUser}" method="post">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <i class="fa fa-laptop modal-icon"></i>
                                <h4 id="AAA" class="modal-title">编辑用户</h4>
                            </div>
                            <div class="modal-body col-xs-12">

                                <div class="col-xs-12">
                                    <input type="hidden" name="userId" id="userId"/>
                                    <div class="form-group">
                                        <label for="cnName">用户名称</label>
                                        <input type="text" class="form-control" id="cnName" name="cnName" placeholder="输入用户名称" />
                                    </div>
                                    <div class="form-group">
                                        <div th:each="r,iterStat : ${roles}">
                                            <label>
                                                <input type="radio" name="roleId" th:id="${'radio'+r.id}" th:value="${r.id}" class="flat-red" />
                                            </label>
                                            <label><p th:text="${r.description}"></p></label>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                                <button type="button" id="saveBtn" class="btn btn-primary">保存设置</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>

    <div layout:fragment="script">
        <script th:src="@{/thirdParty/datatables/jquery.dataTables.min.js}"></script>
        <script th:src="@{/thirdParty/datatables/dataTables.bootstrap.min.js}"></script>
        <script th:src="@{/thirdParty/iCheck/icheck.min.js}" />
        <script th:src="@{/thirdParty/jquery.form.js}" />
        <script>
            $(function () {
                //Flat red color scheme for iCheck
                $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
                    checkboxClass: 'icheckbox_flat-green',
                    radioClass: 'iradio_flat-green'
                });

                $("#datasOnTable").dataTable(
                        {
                            "filter" : false,//去掉搜索框
                            "ordering" : false,
                            "lengthChange": false,
                            "paginationType" : "full_numbers",
                            "destroy" : true,
                            "processing" : true,
                            "serverSide" : true,
                            "ajax" : {
                                "type":"get",
                                "url" :  ctx+"admin/user/list",
                                "dataSrc": "content",
                                "dataFilter": function(data){
                                    var json = jQuery.parseJSON( data );
                                    json.recordsTotal = json.totalElements;
                                    json.recordsFiltered = json.totalElements;
                                    return JSON.stringify( json ); // return JSON string
                                },
                                "data": function (d) {
                                },
                                "error" : function(){
                                    alert("请求数据出错");
                                }
                            },
                            "columns" : [
                                {
                                    "data" : "userId"
                                },
                                {
                                    "data" : "cnName"
                                },
                                {
                                    "data" : "email"
                                },
                                {
                                    "data" : "roleName"
                                },
                                {
                                    "data" : null,
                                    "render":function(data,type,row){
                                        var status = row['isValid'];
                                        var str = '<span class="label label-success">Valid</span>';
                                        if (!status) {
                                            str = '<span class="label label-danger">Invalid</span>';
                                        }
                                        return str;
                                    }
                                },
                                {
                                    "data" : "createTime"
                                },
                                {
                                    "data" : null,
                                    "render":function(data,type,row){
                                        var str = '<button onclick="changeDialog('+row['userId']+')" type="button" class="btn btn-white" data-toggle="modal" data-target="#myModal"><i class="fa fa-pencil"></i> Edit </button>';
                                        return str;
                                    }
                                }],
                            "language" : {
                                "url" : ctx+'thirdParty/datatables/dataTables.CN.txt'
                            }
                        });
            });

            function toAdd(){
                console.log("123");
                alert("联系管理员 添加用户")
                //changeDialog(0);
            }

            //编辑确认按钮
            $("#saveBtn").bind("click",function() {
                $("#updateFrom").ajaxSubmit({
                    success:function(){
                        alert("成功");
                        $('#myModal').modal('hide');
                    },
                    error: function (xhr, status, error) {
                        var result = jQuery.parseJSON(xhr.responseText);
                        alert(result.message);
                    }
                });

            });

            function changeDialog(id){
                console.log(id);
                if(id!=0) {
                    $("#userId").val(id);
                }
                var zTreeObj;
                $.ajax({type:"get",
                    url:ctx+"admin/user/detail/"+id,
                    data:{},
                    dataType:"json",
                    error: function(){
                        alert("系统忙，请稍后再试！");
                    },
                    success:function(json){
                        console.log(json.cnName);
                        $("#cnName").val(json.cnName);
                        $("#radio"+json.roleId).iCheck('check');
                    }
                });
            }
        </script>
    </div>


</body>
</html>